<template>
  <div class="product-card">
    <img :src="product.image" :alt="product.name" class="product-image">
    <div class="product-info">
      <h3 class="product-name">{{ product.name }}</h3>
      <div class="price-tag">{{ product.price }}¥</div>
      <div class="product-tags">
        <span class="tag">{{ product.tag }}</span>
      </div>
      <div class="specifications">
        <span class="spec-item" v-for="spec in product.specifications" :key="spec">{{ spec }}</span>
      </div>
    </div>
    <div class="actions">
      <el-button @click="addToCart">加入购物车</el-button>
      <el-button @click="viewDetails">查看详情</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps<{
  product: {
    id: string;
    name: string;
    price: number;
    image: string;
    tag: string;
    specifications: string[];
  };
}>();

const emits = defineEmits(['addToCart', 'viewDetails']);

const addToCart = () => {
  emits('addToCart', props.product);
};

const viewDetails = () => {
  emits('viewDetails', props.product);
};
</script>

<style scoped>
.product-card {
  /* 卡片样式... */
}
</style>
